<template>
  <div>
    <div class="search_sort">
      <span :class="{ line_w: sort_line == 0 }" @click="click_sort(0)">
        <span>精选</span>
        <span></span>
      </span>
      <span :class="{ line_w: sort_line == 1 }" @click="click_sort(1)">
        <span>歌单</span>
        <span></span>
      </span>
      <span :class="{ line_w: sort_line == 2 }" @click="click_sort(2)">
        <span>专辑</span>
        <span></span>
      </span>
      <span :class="{ line_w: sort_line == 3 }" @click="click_sort(3)">
        <span>MV</span>
        <span></span>
      </span>
    </div>
    <!-- 歌曲列表 -->
    <song_list :singer_song="song_list" v-show="sort_line==0?true:false"/>
    <!-- 歌单列表 -->
    <special_list :special_list="special_list" v-show="sort_line==1?true:false"/>
    <!-- 专辑列表 -->
    <album_list   :album_list="album_list"  v-show="sort_line==2?true:false"/>
    <!-- MV列表 -->
    <mv_list :mv_list="mv_list" v-show="sort_line==3?true:false"/>
  </div>
</template>
<script>
import {mapState} from "vuex"
export default {
  data() {
    return {
      // 控制搜索分类显示
      sort_line: 0,
    };
  },
  mounted() {
    this.getdata()
    //解决输入框刷新搜索内容消失问题
    this.$bus.$emit('text',this.$route.query.text)
  },
  methods:{
    async getdata(){
        this.$store.dispatch("search_song",this.$route.query.text)
    },
    async click_sort(index){
      //根据搜索分类获取数据
      if(index==1){
        await this.$store.dispatch("search_special",this.$route.query.text)
      }else if(index==2){
        await this.$store.dispatch("search_album",this.$route.query.text) 
      }else if(index==3){
        await this.$store.dispatch("search_mv",this.$route.query.text)
      }
      this.sort_line=index
    }
  },
  // vuex数据仓库
  computed:{
    ...mapState({

        song_list:(state)=>state.search.search_song_list,
        special_list:(state)=>state.search.search_special_list,
        album_list:(state)=>state.search.search_album_list,
        mv_list:(state)=>state.search.search_mv_list,
    })
  }
};
</script>

<style lang="less">
.search_sort {
  display: flex;
  margin-right: 600px;
  justify-content: space-between;
  margin-bottom: 10px;
  span {
    cursor: pointer;
    width: auto;
  }
  .line_w {
    span:nth-child(1) {
      font-weight: bold;
      display: block;
      margin-bottom: 3px;
    }
    span:nth-child(2) {
      display: flex;
      width: 10px;
      border-radius: 1.5px;
      height: 3px;
      background-color: #00a9ff;
      margin: 0 auto;
    }
  }
}
</style>